define(window.backboneCommon.getViewDefine("targets.audience"), function ($,require,Collection,tpl) {
    var defaultsOptions={
        submitCallback:null
    };
    var pagePrivate = {
        getDefaults :function () {
            return defaultsOptions
        },
        getOptions : function (options) {
            options=$.ExtCommon.isCheckEmpty(options)?{}:options;
            options.dataAgeInfo={min:5,max:60,join:"~"};
            return $.ExtCommon.initMergeJson(this.getDefaults(),options);
        }
    };
    var backboneView= Backbone.View.extend({
        events: {
            "click #submit_modal_targetAudience": "saveSubmit"
        },
        initialize: function () {
            this.listenTo(this.model, 'bind:Education', this.bindEducation);
            this.listenTo(this.model, 'bind:Gender', this.bindGender);
            this.listenTo(this.model, 'bind:Marriage', this.bindMarriage);
            this.render();
        },
        render:function(){
            var templateHtml=_.template(tpl);
            this.$el.html(templateHtml());
            return this;
        },
        initMain:function(options){
            this.elementModel={
                gender:$('#panel_modal_targetGender'),
                education:$('#panel_modal_targetEducation'),
                marriage:$('#panel_modal_targetMarriage'),
                age:$('#txt_modal_TargetAge'),
                modal:$('#modal_targetAudience')
            };
            this.extObject={};
            this.pageData={initPage:false,listSelect:{}};
            this.pageOptions=$.ExtCommon.initMergeJson(pagePrivate.getOptions(),options);
        },
        initPage:function (json) {
            json=$.ExtCommon.isCheckEmpty(json)?{}:json;
            this.pageData.listSelect=json;
            if(!this.pageData.initPage){
                this.pageData.initPage=true;
                this.collection.initAfterAudience();
            }else{
                //this._initRadioCheckbox("age");
                this._initRadioCheckbox("gender",[],"radio");
                this._initRadioCheckbox("education");
                this._initRadioCheckbox("marriage");
            }
            this.bindAge();
            this._showModal();
        },
        bindAge:function () {
            var self=this;
            var ageValue={from:self.pageOptions.dataAgeInfo.min,to:self.pageOptions.dataAgeInfo.max};
            var arrAgeValue=[5,60];
            if(!$.ExtCommon.isCheckEmpty(self.pageData.listSelect.age)){
                arrAgeValue=self.pageData.listSelect.age.split(self.pageOptions.dataAgeInfo.join);
                if(arrAgeValue.length===2){
                    ageValue.from=arrAgeValue[0];
                    ageValue.to=arrAgeValue[1];
                }
            }
            if(self.extObject.age){
                if(arrAgeValue.length===2){
                    self.elementModel.age.data("ionRangeSlider").update({from: ageValue.from, to: ageValue.to});
                }
            }else {
                self.extObject.age = self.elementModel.age.ionRangeSlider({
                    type: "double", grid: true,
                    min: self.pageOptions.dataAgeInfo.min,
                    max: self.pageOptions.dataAgeInfo.max,
                    from: ageValue.from,
                    to: ageValue.to,
                    "input_values_separator":self.pageOptions.dataAgeInfo.join
                });
            }
        },
        bindGender:function () {
            var res=this.model.get("dataGender");
            this._initRadioCheckbox("gender",res.data,"radio");
        },
        bindEducation:function () {
            var res=this.model.get("dataEducation");
            this._initRadioCheckbox("education",res.data);
        },
        bindMarriage:function () {
            var res=this.model.get("dataMarriage");
            this._initRadioCheckbox("marriage",res.data);
        },
        _initRadioCheckbox:function(type,data,elType){
            var self=this;
            var dataValue=self.pageData.listSelect[type];
            var arrValue= $.ExtCommon.isCheckEmpty(dataValue)?[]:$.map(dataValue,function(info){return info.id.toString()});
            if(self.extObject[type]){
                self.extObject[type].setValue(arrValue);
            }else{
                data= $.ExtCommon.isCheckEmpty(data)?[]:data;
                elType= $.ExtCommon.isCheckUndefined(elType)?"checkbox":elType;
                self.extObject[type]=self.elementModel[type].ExtRadioCheckbox({type: elType,attrName:type,defaultInfo:{width:90},data: data,initValue: arrValue});
            }
        },
        _checkForm:function () {},
        saveSubmit:function () {
            var jsonData={};
            var gender=this.extObject["gender"].getValueList();
            var education=this.extObject["education"].getValueList();
            var marriage=this.extObject["marriage"].getValueList();
            var age=this.elementModel.age.val();
            if(gender.length>0){jsonData.gender=gender}
            if(education.length>0){jsonData.education=education}
            if(marriage.length>0){jsonData.marriage=marriage}
            if(age.length>0){jsonData.age=age}
            this._hideModal();
            if(this.pageOptions.submitCallback){this.pageOptions.submitCallback(jsonData);}
        },
        _showModal:function(){
            this.elementModel.modal.modal("show");
            $.ExtAssist.modal.computeTop(this.elementModel.modal);
        },
        _hideModal: function () {
            this.elementModel.modal.modal("hide");
        }
    });
    var viewModel=function(options){
        this.collection= new Collection();
        this.model=this.collection.model;
        this.view=new backboneView({el:options.pElement,collection:this.collection,model:this.model});
        this.view.initMain(options);
    };
    viewModel.prototype={
        init:function (json) {
            this.view.initPage(json);
        }
    };
    return viewModel;
});